import React, { useState, useEffect } from 'react'
import useUpdate from './useUpdate'

export default function Index() {
  const [ count, setCount ] = useState(0)
  const [ list, setList ] = useState(['a'])

  /**
   * 特性：
   * 1、在组件加载完毕的时候执行
   * 2、可以定义很多个，多个函数会自动运行
   * 3、第二个参数是个数组，定义useEffect的执行依赖，
   *   如果不定义这个数组，总是组件重新渲染的时候，再次执行
   *   如果是空数组，那么这个函数就相当于ComponentDidMount
   *   如果定义了依赖，这个函数在依赖更新的时候运行
   */
  // useEffect(() => {
    // console.log(0)
    // console.log(0)
    // console.log(document.querySelector('#root').innerHTML)
    // setCount(count+1)
    // setCount(count => count + 1)
  // })

  const changeList = () => {
    setList(['aaa'])
  }

  useEffect(() => {
    setCount(100)

    // 定义了ComponentWillUnmount
    return () => {
      console.log('unmount')
    }
  }, [])

  useEffect(() => {
    console.log(1)
    // setCount(100)
  }, [list])

  // componentDidUpdate
  useUpdate(() => {
    console.log(100)
  })

  return (
    <div>
      {count}
      {list}
      <button onClick={changeList}>change list</button>
    </div>
  )
}
